<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="css/googleapis.css" rel="stylesheet">
    <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" rel="stylesheet"/>
    <link href="css/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <title>cvte系统</title>
    <script src="js/vue.js"></script>
    <script src="js/vuetify.js"></script>
    <script src="js/jquery-2.1.0.min.js"></script>
</head>

<body>
    <div id="app">
        <v-navigation-drawer v-model="drawer" app>
            <!-- 左侧未登录提示 -->
            <v-list dense v-show="!login.isLogin">
                <v-list-item link v-on:click="showReg">
                    <v-list-item-action>
                        <v-icon>mdi-account-plus</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>注册</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                <v-list-item link v-on:click="showLogin">
                    <v-list-item-action>
                        <v-icon>mdi-login</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>登陆</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>

            <!-- 欢迎信息和显示内容 -->
            <v-list dense v-show="login.isLogin">
                <v-list-item link>
                    <v-list-item-action>
                        <v-icon>mdi-account</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title>{{login.username}} 您好!</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
                
                <v-list-item v-on:click="loginout">
                    <v-list-item-action>
                        <v-icon>mdi-logout</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title >退出登陆</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

        <v-app>
            <v-app-bar app color="indigo" dark>
                <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
                <v-toolbar-title>cvte系统</v-toolbar-title>
            </v-app-bar>
            <v-content>
                
                <v-simple-table v-show="login.isLogin">
                    <template v-slot:default>
                        <thead>
                            <tr>
                                <th class="text-center">欢迎来到CVTE~~~</th>
                            </tr>
                        </thead>
                    </template>
                </v-simple-table>

                <v-row v-show="!login.isLogin">
                    <v-col>
                        <v-card class="pa-2 text-center">请先登陆!</v-card>
                    </v-col>
                </v-row>

                <!-- 登录窗口 -->
                <v-row justify="center">
                    <v-dialog v-model="login.showLoginDialog" persistent max-width="400px">
                        <v-card>
                            <v-card-title>
                                <span class="headline">登陆</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="用户名*" v-model="login.username" required>
                                            </v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="密码*" type="password" v-model="login.password" required>
                                            </v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field  type="text" label="请输入验证码*" v-model="login.code" required>
                                            </v-text-field>
                                            <div>
                                                <img src="/user/verifyCode" style="display: block;" alt="" id="verification" onclick="refresh1()">
                                            </div>
                                        </v-col>
                                    </v-row>
                                    
                                    <v-row>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="doLogin">登陆</v-btn>
                                        </v-col>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="login.showLoginDialog = false">取消
                                            </v-btn>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                        </v-card>
                    </v-dialog>
                </v-row>

                <!-- 注册窗口 -->
                <v-row justify="center">
                    <v-dialog v-model="reg.showRegister" persistent max-width="400px">
                        <v-card>
                            <v-card-title>
                                <span class="headline">注册</span>
                            </v-card-title>
                            <v-card-text>
                                <v-container>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="用户名" v-model="reg.name" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="昵称" v-model="reg.name2" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="密码" type="password" v-model="reg.password" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field label="确认密码" type="password"  v-model="reg.password2" required></v-text-field>
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col cols="12" sm="12">
                                            <v-text-field  type="text" label="请输入验证码*" v-model="reg.code" required>
                                            </v-text-field>
                                            <div>
                                                <img src="/user/verifyCode" style="display: block;" alt="" id="verification2" onclick="refresh2()">
                                            </div>
                                        </v-col>
                                    </v-row>
                                    
                                    <v-row>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="doRegister">注册</v-btn>
                                        </v-col>
                                        <v-col cols="12" sm="6">
                                            <v-btn color="primary" block v-on:click="reg.showRegister = false">取消
                                            </v-btn>
                                        </v-col>
                                    </v-row>
                                </v-container>
                            </v-card-text>
                        </v-card>
                    </v-dialog>
                </v-row>
               
            </v-content>
        </v-app>
    </div>


    <script>
        //刷新验证码(登录)
        function refresh1() {
                    jQuery.ajax({
                        url: "/user/verifyCode",
                        type: "GET",
                        success: function(result) {
                            if (result != null) {
                                document.getElementById("verification").src = "/user/verifyCode";
                            } else {
                                alert("未知错误，请重试");
                            }
                        }
                    });
                }

                //刷新验证码(注册)
        function refresh2() {
                  jQuery.ajax({
                        url: "/user/verifyCode",
                        type: "GET",
                        success: function(result) {
                            if (result != null) {
                                document.getElementById("verification2").src = "/user/verifyCode";
                            } else {
                                alert("未知错误，请重试");
                            }
                        }
                    });
                }

        let app = new Vue({
            el: '#app',
            data: {
                drawer: null,
                // status: 'dishesPage', // 取值为: ordersPage, dishesPage
                // 用于辅助实现登陆
                login: {
                    isLogin: false,
                    showLoginDialog: false,
                    username: "",
                    password: "",
                    code: ""
                },
                // 注册相关参数定义
                reg: {
                    showRegister: false,
                    name: "",
                    name2: "",
                    password: "",
                    password2: "",
                    code: ""
                    
                },
                user: {
                    name: ""
                },
                
            },
            methods: {            
                //显示登录窗体
                showLogin(){
                    this.login.showLoginDialog=true;
                    this.login.username="";
                    this.login.password="";
                    this.login.code="";
                },


                //判断是否登录，初始化页面
                init() {
                    jQuery.ajax({
                        url: "user/islogin",
                        type: "POST",
                        success: function(result) {
                            if (result != null && result.data != "") {
                                app.initlogin(result.data.username);
                                // app.showDishes();
                            } else {
                                location.href = "index.html";
                            }
                        }
                    });
                },

                //显示登录的信息
                initlogin(username) {
                    app.displayLogin();
                    app.login.name = username;
                    app.login.isLogin = true;
                },

                displayLogin() {
                    app.login.username = "";
                    app.login.password = "";
                    app.login.code="";
                    app.login.showLoginDialog = false;
                },


                // 登录方法
                doLogin(){
                    //1.非空校验
                    if(this.login.username.trim()==""){
                        alert("请先输入用户名！");
                        return;
                    }
                    if(this.login.password.trim()==""){
                        alert("请先输入密码！");
                        return;
                    }
                    if(this.login.code.trim()==""){
                        alert("请先输入验证码！");
                        return;
                    }
                    //2.请求后端进行登录操作
                    jQuery.ajax({
                        url:"user/login",
                        type:"POST",
                        data:{
                            username:this.login.username,
                            password:this.login.password,
                            code:this.login.code,
                        },
                        success:function(result){
                             if(result!=null && result.data!=null){
                                alert("登录成功")
                                app.login.showLoginDialog = false;
                                app.login.isLogin = true;
                                app.initLogin(result.data.username);
                             }else{
                                 alert("请先检查验证码，若验证码无误！则账号或密码错误");
                                 refresh1();
                             }
                        }
                    });

                },
                
                
                showReg(){// 点击“注册按钮事件”,显示注册窗体
                    this.reg.showRegister=true;
                    this.reg.name="";
                    this.reg.name2="";
                    this.reg.password="";
                    this.reg.password2="";
                    this.reg.code="";
                },

                doRegister(){//进行注册
                    //1.参数的正确性校验
                    if(this.reg.name.trim()==""){
                        alert("请先输入用户名！");
                        return;
                    }
                    if(this.reg.name2.trim()==""){
                        alert("请先输入昵称！");
                        return;
                    }
                    if(this.reg.code.trim()==""){
                        alert("请先输入验证码！");
                        return;
                    }
                    if(this.reg.password.trim()==""){
                        alert("请先输入密码！");
                        return;
                    }
                    if(this.reg.password.length<8){
                        alert("密码长度小于8位，请重新输入！");
                        return;
                    }

                    if(this.reg.password2.trim()==""){
                        alert("请先输入确认密码！");
                        return;
                    }

                    if(this.reg.password !=this.reg.password2){
                        alter("两次输入的密码不一致，请重新输入！");
                        return;
                    }


                    //2.将参数提交到后端
                    jQuery.ajax({
                        url:"user/reg",
                        type:"POST",
                        data:{
                            username:this.reg.name,
                            nickname:this.reg.name2,
                            password:this.reg.password,
                            code:this.reg.code,
                        },
                        success:function(result){
                            if (result != null && result.data == true) {
                                alert("注册成功")
                                app.displayReg();
                            } else {
                                alert("注册失败");
                                refresh2();
                            }
                        }
                    });
                },
                  //点击取消时将输入的用户名和密码清空
                  displayReg() {
                    app.reg.name = "";
                    app.reg.password = "";
                    app.reg.password2 = "";
                    app.reg.code="";
                    app.reg.showRegister = false;
                },

                
                //退出登录
                loginout() {
                    if (!confirm("确认退出")) {
                        return;
                    }
                    jQuery.ajax({
                        url: "user/logout",
                        type: "POST",
                        success: function(result) {
                            if (result != null && result.data == true) {
                                alert("再见~");
                                app.login.isLogin = false;
                            }
                        }
                    });
                },                
            },

            computed: { //计算属性和监听器
              
            },
            vuetify: new Vuetify(),
        });
        app.init();
    </script>
</body>

</html>